<template>
  <div class="line-Loss">
    <el-tabs
      v-model="activeName1"
      :tab-position="tabPosition"
      class="line-Loss-w"
      @tab-click="tabClick"
    >
      <el-tab-pane :name="item.name" v-for="item in tabData" :label="item.name">
        <el-tabs
          v-if="activeName1 === item.name"
          :tab-position="tabPosition"
          class="demo-tabs"
        >
          <template v-for="item1 in item.children">
            <el-tab-pane v-if="item1.type === 3" :label="item1.label">
              <div class="demo-progress" v-if="percentageFlag">
                <el-progress :stroke-width="10" :percentage="percentage" />
              </div>
              <div>
                <el-table
                  ref="dataTabRef"
                  :data="tableData"
                  border
                  @row-click="rowClick"
                  @selection-change="handleSelectionChange"
                  @header-click="headerClick"
                  @cell-click="cellClick"
                  style="width: 100%"
                  class="line-Loss-w-table"
                  v-loading="loading"
                  element-loading-text="Loading..."
                  element-loading-svg-view-box="-10, -10, 50, 50"
                  element-loading-background="rgba(255 , 255 , 255, 0.55)"
                  :cell-class-name="tableCellClassName"
                >
                  <el-table-column fixed prop="label" label="" width="180" />
                  <el-table-column fixed type="selection" width="55" />
                  <el-table-column
                    v-for="(item2, key) in tableHeader"
                    :key="key"
                    :prop="item2.position + ''"
                    :label="
                      item2.pname +
                      item2.name +
                      (item2.position ? '[' + item2.position + '' + ']' : '')
                    "
                    align="center"
                    width="100"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row['value' + item2.position]"
                        :disabled="scope.row.disabled"
                      ></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="ll-control">
                <div class="ll-control-item">
                  <el-radio-group v-model="readRadio" class="ll-group">
                    <el-radio label="1">选中数据</el-radio>
                    <el-radio label="2">当前表数据</el-radio>
                    <el-radio label="3">所有表数据</el-radio>
                    <!-- <el-radio label="4">所有失败项</el-radio> -->
                  </el-radio-group>
                  <div class="item1">
                    <el-button
                      :disabled="loading ? true : false"
                      @click="readTabData"
                      >读取数据</el-button
                    >
                    <el-button @click="cancelData">取消</el-button>
                  </div>
                </div>
                <div class="ll-control-item ll-item2">
                  <div class="item2">
                    <p>
                      <label style="height: 30px; line-height: 30px"
                        >实际线损率：</label
                      >
                      <el-input
                        v-model="actualLineLossParm"
                        type="text"
                        placeholder=""
                        style="margin-right: 10px"
                      />
                      <el-button @click="actualLineLoss">计算</el-button>
                    </p>
                    <!-- <p>
                      <label>理论线损率：</label>
                      <el-input
                        v-model="theoreticalLossParm"
                        type="text"
                        placeholder=""
                      />
                      <el-button @click="theoreticalLoss">计算</el-button>
                    </p> -->
                  </div>
                  <!-- <div class="item3">
                    <p>
                      <label>有功总电能正向：</label>
                      <el-input type="text" placeholder="" />
                    </p>
                    <p>
                      <label>有功总电能反向：</label>
                      <el-input type="text" placeholder="" />
                    </p>
                    <p>
                      <label>有功总电能正反：</label>
                      <el-input type="text" placeholder="" />
                    </p>
                  </div> -->
                </div>
                <!-- <div class="ll-control-item">
                  <el-radio-group v-model="writeRadio" class="ll-group">
                    <el-radio label="1">选中数据</el-radio>
                    <el-radio label="2">当前表数据</el-radio>
                    <el-radio label="3">所有表数据</el-radio>
                  </el-radio-group>
                  <div class="item1">
                    <el-button @click="writeTabData">写入数据</el-button>
                  </div>
                </div> -->
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
import { lineLossData } from "@/gm/meterLabel.js";
import { ElectricMeter, LineLose } from "@/utils/LoseLine.js";
import {
  meterMeterDataCollection,
  meterPositionListLineLoss,
} from "@/api/source.js";

const useApp = useAppStore();
let {
  organStructure,
  readerDataArr,
  currentPlanId,
  powerEle,
  tableVoltage,
  meterCurrent,
} = storeToRefs(useApp);

const tabPosition = ref("left");
let obj = organStructure.value[0].children;
const tabData = ref([]);
const activeName1 = ref("台区1");
const readRadio = ref("1");
const writeRadio = ref("1");
const tempData = ref();
const multipleSelection = ref([]);
const dataTabRef = ref();
const cellData = ref();
const position = ref();
const currentData = ref([]);
const checkAll = ref([]);
const tableHeader = ref([]);
const actualLineLossParm = ref();
const theoreticalLossParm = ref();
const errVal = ref(0);
const successVal = ref(0);
const tableData = ref(lineLossData.filter((item) => item.type != 1));
const radio = ref(1);
const isContinue = ref(false);
const flag = ref(false);
const percentage = ref(0);
const percentageFlag = ref(false);
const loading = ref(false);

const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    return "first-column-class";
  }
  return "";
};
//数据初始化
onMounted(() => {
  //数据监听
  watch(
    obj,
    (newValue, oldValue) => {
      tabData.value = newValue.filter((item) => item.type === 1);
      tabData.value.forEach((item) => {
        if (item.children) {
          item.children.forEach((item1) => {
            if (item1.type === 3) item1.label = "线损";
          });
        }
      });
      // 立即执行，且当 `source` 改变时再次执行
    },
    { immediate: true },
    { deep: true }
  );
  meterPositionListLineLossApi();
  position.value = "";
  // errVal.value = tableData.value.length;
});

const tabClick = (val, event) => {
  if (val.props != undefined && val.props) {
    let tempData = currentData.value.filter(
      (item) => val.props.name === item.name
    );
    tableHeader.value = tempData[0].children.filter((item) => item.type != 1);
  } else {
    let tempData = currentData.value.filter((item) => val === item.name);
    tableHeader.value = tempData[0].children.filter((item) => item.type != 1);
  }
};
//线损列表
const meterPositionListLineLossApi = async () => {
  let parm = {
    planId: currentPlanId.value,
  };
  await meterPositionListLineLoss(parm)
    .then((res) => {
      currentData.value = res.data;
      if (res.data[0]) tabClick(res.data[0].name); //模拟点击事件
    })
    .catch((err) => {
      console.log(err);
    });
};
// 读取表信息
const readTabData = () => {
  checkAll.value = [];
  successVal.value = 0;
  errVal.value = 0;
  readerDataArr.value = [];
  isContinue.value = false;
  percentage.value = 0;
  if (readRadio.value === "3" || readRadio.value === "4") {
    let parm = [];
    tableHeader.value.forEach((item) => {
      tableData.value.forEach((item1) => {
        let obj = {};
        if (item1.label === "瞬时总有功功率") {
          obj = {
            pos: item.position,
            parm: [item1.parm1],
            methodName: item1.parm0,
            planId: currentPlanId.value,
          };
        } else {
          obj = {
            pos: item.position,
            parm: [item1.parm1, item1.parm2],
            methodName: item1.parm0,
            planId: currentPlanId.value,
          };
        }
        checkAll.value.push(item1.prop);
        parm.push(obj);
      });
    });
    meterMeterDataCollectionApi(parm, 0, 1);
  } else {
    if (
      multipleSelection.value.length > 0 ||
      position.value ||
      cellData.value
    ) {
      switch (readRadio.value) {
        case "1":
          //选中列
          if (position.value) {
            let parm = [];
            // 是否有多选
            if (multipleSelection.value.length > 0) {
              multipleSelection.value.forEach((item1) => {
                let obj = {};
                if (item1.label === "瞬时总有功功率") {
                  obj = {
                    pos: position.value,
                    parm: [item1.parm1],
                    methodName: item1.parm0,
                    planId: currentPlanId.value,
                  };
                } else {
                  obj = {
                    pos: position.value,
                    parm: [item1.parm1, item1.parm2],
                    methodName: item1.parm0,
                    planId: currentPlanId.value,
                  };
                }
                checkAll.value.push(item1.prop);
                parm.push(obj);
              });
            } else {
              tableData.value.forEach((item1) => {
                let obj = {};
                if (item1.label === "瞬时总有功功率") {
                  obj = {
                    pos: position.value,
                    parm: [item1.parm1],
                    methodName: item1.parm0,
                    planId: currentPlanId.value,
                  };
                } else {
                  obj = {
                    pos: position.value,
                    parm: [item1.parm1, item1.parm2],
                    methodName: item1.parm0,
                    planId: currentPlanId.value,
                  };
                }
                checkAll.value.push(item1.prop);
                parm.push(obj);
              });
            }
            meterMeterDataCollectionApi(parm, 0, 1); //接口调用
          }
          //选中行
          else if (multipleSelection.value.length > 0) {
            let tempArr = loopData(tabData.value, []);
            let parm = [];
            tempArr.forEach((item) => {
              multipleSelection.value.forEach((item1) => {
                let obj = {};
                if (item1.label === "瞬时总有功功率") {
                  obj = {
                    pos: item.position,
                    parm: [item1.parm1],
                    methodName: item1.parm0,
                    planId: currentPlanId.value,
                  };
                } else {
                  obj = {
                    pos: item.position,
                    parm: [item1.parm1, item1.parm2],
                    methodName: item1.parm0,
                    planId: currentPlanId.value,
                  };
                }
                checkAll.value.push(item1.prop);
                parm.push(obj);
              });
            });
            meterMeterDataCollectionApi(parm, 0, 1); //接口调用
          }
          //选中表格 cellData
          else if (cellData.value) {
            let parm = {};
            if (cellData.value.row.label === "瞬时总有功功率") {
              parm = {
                pos: cellData.value.meterPositionId,
                parm: [cellData.value.row.parm1],
                methodName: cellData.value.row.parm0,
                planId: currentPlanId.value,
              };
            } else {
              parm = {
                pos: cellData.value.meterPositionId,
                parm: [cellData.value.row.parm1, cellData.value.row.parm2],
                methodName: cellData.value.row.parm0,
                planId: currentPlanId.value,
              };
            }
            checkAll.value.push(cellData.value.row.prop);
            meterMeterDataCollectionApi([parm], 0, 1); //接口调用
          }
          break;
        case "2":
          if (!position.value) {
            ElMessage({
              message: "请先选择当前表信息",
              type: "warning",
            });
          } else {
            let parm = [];
            tableData.value.forEach((item1) => {
              let obj = {};
              if (item1.label === "瞬时总有功功率") {
                obj = {
                  pos: position.value,
                  parm: [item1.parm1],
                  methodName: item1.parm0,
                  planId: currentPlanId.value,
                };
              } else {
                obj = {
                  pos: position.value,
                  parm: [item1.parm1, item1.parm2],
                  methodName: item1.parm0,
                  planId: currentPlanId.value,
                };
              }
              checkAll.value.push(item1.prop);
              parm.push(obj);
            });
            meterMeterDataCollectionApi(parm, 0, 1);
          }
          break;
        case "4":
          break;
        default:
          break;
      }
    } else {
      ElMessage({
        message: "请先选择当前读取表信息",
        type: "warning",
      });
    }
  }
};
const writeTabData = () => {
  if (writeRadio.value === "3") {
    let parm = [];
    tableHeader.value.forEach((item) => {
      tableData.value.forEach((item1) => {
        let parm3 = item1["value" + item.position];
        if (parm3 === undefined || !parm3) parm3 = "";
        let obj = {
          pos: item.position,
          parm: [item1.parm1, item1.parm2, parm3],
          methodName: item1.parm01,
          planId: currentPlanId.value,
        };
        parm.push(obj);
      });
    });
    meterMeterDataCollectionApi(parm, 0, 2);
  } else {
    if (
      multipleSelection.value.length > 0 ||
      position.value ||
      cellData.value
    ) {
      switch (writeRadio.value) {
        case "1":
          //选中列
          if (position.value) {
            // 是否有多选
            let parm = [];
            if (multipleSelection.value.length > 0) {
              multipleSelection.value.forEach((item1) => {
                let parm3 = item1["value" + position.value];
                if (parm3 === undefined || !parm3) parm3 = "";
                let obj = {
                  pos: position.value,
                  parm: [item1.parm1, item1.parm2, parm3],
                  methodName: item1.parm01,
                  planId: currentPlanId.value,
                };
                parm.push(obj);
              });
            } else {
              tableData.value.forEach((item1) => {
                let parm3 = item1["value" + position.value];
                if (parm3 === undefined || !parm3) parm3 = "";
                let obj = {
                  pos: position.value,
                  parm: [item1.parm1, item1.parm2, parm3],
                  methodName: item1.parm01,
                  planId: currentPlanId.value,
                };
                parm.push(obj);
              });
            }
            meterMeterDataCollectionApi(parm, 0, 2);
          }
          //选中行
          else if (multipleSelection.value.length > 0) {
            let tempArr = loopData(tabData.value, []);
            let parm = [];
            tempArr.forEach((item) => {
              multipleSelection.value.forEach((item1) => {
                let parm3 = item1["value" + item.position];
                if (parm3 === undefined || !parm3) parm3 = "";
                let obj = {
                  pos: item.position,
                  parm: [item1.parm1, item1.parm2, parm3],
                  methodName: item1.parm01,
                  planId: currentPlanId.value,
                };
                parm.push(obj);
              });
            });
            meterMeterDataCollectionApi(parm, 0, 2);
          }
          //选中表格 cellData
          else if (cellData.value) {
            let parm3 =
              cellData.value.row["value" + cellData.value.meterPositionId];
            if (parm3 === undefined || !parm3) parm3 = "";
            let parm = {
              pos: cellData.value.meterPositionId,
              parm: [cellData.value.row.parm1, cellData.value.row.parm2, parm3],
              methodName: cellData.value.row.parm01,
              planId: currentPlanId.value,
            };
            meterMeterDataCollectionApi([parm], 0, 2);
          }
          break;
        case "2":
          let i2 = 0;
          if (!position.value) {
            ElMessage({
              message: "请先选择当前表信息",
              type: "warning",
            });
          } else {
            let parm = [];
            tableData.value.forEach((item1) => {
              let parm3 = item1["value" + position.value];
              if (parm3 === undefined || !parm3) parm3 = "";
              let obj = {
                pos: position.value,
                parm: [item1.parm1, item1.parm2, parm3],
                methodName: item1.parm01,
                planId: currentPlanId.value,
              };
              parm.push(obj);
            });
            meterMeterDataCollectionApi(parm, 0, 2);
          }
          break;
        case "4":
          break;
        default:
          break;
      }
    } else {
      ElMessage({
        message: "请先选择当前写入表信息",
        type: "warning",
      });
    }
  }
};
const loopData = (dataTab = [], tempArr) => {
  let arr = [3, 4, 7, 8];
  dataTab.forEach((item) => {
    if (arr.includes(item.type)) {
      tempArr.push(item);
    }
    if (item.children != undefined && item.children.length > 0) {
      loopData(item.children, tempArr);
    }
  });
  return tempArr;
};
const meterMeterDataCollectionApi = async (params, i, type) => {
  loading.value = true;
  percentageFlag.value = true;
  let parm = params[i];
  if (isContinue.value) {
    loading.value = false;
  } else {
    await meterMeterDataCollection(parm)
      .then((res) => {
        // console.log(res);
        if (type === 1) getParseData(parm, res.data.data, i); //匹配数据赋值
        if (++i < params.length) {
          meterMeterDataCollectionApi(params, i, type, i); //循环调用
        }
        getProcess(i);
        successVal.value++;
      })
      .catch(() => {
        if (type === 1) getParseData(parm, "失败", i); //匹配数据赋值
        if (++i < params.length) {
          meterMeterDataCollectionApi(params, i, type); //循环调用
        }
        getProcess(i);
        errVal.value++;
      });
    if (i == params.length) {
      loading.value = false;
      let msg;
      if (type === 1) msg = "读取成功";
      if (type === 2) msg = "写入成功";
      else msg = "发送成功";
      ElMessage({
        type: "success",
        message: msg,
      });
    }
  }
};
const getParseData = (data, result, i) => {
  tableData.value.forEach((item) => {
    if (checkAll.value.includes(item.prop)) {
      if (data.methodName === "readInstantaneousTotalApparentPower") {
        //1.确定methodName
        if (item.parm0 === data.methodName) {
          if (item.parm1 === data.parm[0]) {
            item["value" + data.pos] = result;
            readerDataArr.value.push(result);
          }
        }
      } else {
        //1.确定methodName
        if (item.parm0 === data.methodName) {
          //2.确定上月还是本月
          if (item.parm2 === data.parm[1]) {
            //3.确定尖峰平谷总
            if (item.parm1 === data.parm[0]) {
              item["value" + data.pos] = result;
              readerDataArr.value.push(result);
            }
          }
        }
      }
    }
  });
};
const getProcess = (i) => {
  let total;
  let percentage;
  if (readRadio.value === "3" || readRadio.value === "4") {
    total = tableHeader.value.length * tableData.value.length;
    percentage = Math.ceil((i / total) * 100).toFixed(2);
    changePercentageData(percentage);
  } else if (readRadio.value === "1") {
    if (position.value) {
      if (multipleSelection.value.length > 0) {
        percentage = "100";
        changePercentageData(percentage);
      } else {
        total = tableData.value.length;
        percentage = Math.ceil((i / total) * 100).toFixed(2);
        changePercentageData(percentage);
      }
    } else if (multipleSelection.value.length > 0) {
      total = tableHeader.value.length * multipleSelection.value.length;
      percentage = Math.ceil((i / total) * 100).toFixed(2);
      changePercentageData(percentage);
    } else if (cellData.value) {
      percentage = "100";
      changePercentageData(percentage);
    }
  } else if (readRadio.value === "2") {
    total = tableData.value.length;
    percentage = Math.ceil((i / total) * 100).toFixed(2);
    changePercentageData(percentage);
  }
};
const changePercentageData = (parm) => {
  percentage.value = Number(parm);
};
//表格行点击事件
const rowClick = (row, column) => {
  tempData.value = row;
  let obj = document.getElementsByClassName("el-table__cell");
  for (var i = 0; i < obj.length; i++) {
    // 设置背景色为红色
    obj[i].style.backgroundColor = "#fff";
  }
};
const cellClick = (row, column) => {
  if (event.property != "label") {
    let obj = {
      meterPositionId: event.property,
      row,
    };
    cellData.value = obj;
    multipleSelection.value = [];
    position.value = "";
    dataTabRef.value[0].clearSelection();
  }
};
const filterChange = (row) => {
  // console.log(row);
};
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  //position.value = "";
  cellData.value = {};
};
const headerClick = (val) => {
  if (val.property != "label" && val.property) {
    position.value = val.property;
    dataTabRef.value[0].setCurrentRow();
    var elements = document.getElementsByClassName(val.id);
    let obj = document.getElementsByClassName("el-table__cell");
    for (var i = 0; i < obj.length; i++) {
      // 设置背景色为红色
      obj[i].style.backgroundColor = "#fff";
    }
    // 遍历每个元素并设置样式属性值
    for (var i = 0; i < elements.length; i++) {
      // 设置背景色为红色
      elements[i].style.backgroundColor = "#e6f2f0";
    }
  }
};
//实际线损率
const actualLineLoss = () => {
  let total = tableData.value.length * tableHeader.value.length;
  let num = getDataValues();
  let meter = [];
  //console.log(total, num, readerDataArr.value, tableHeader.value);
  if (total === num) {
    lineLossDataS(meter);
  } else {
    ElMessageBox.confirm("请先读取数据", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        readRadio.value = "3";
        readTabData();
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消成功",
        });
      });
  }
};
const getDataValues = () => {
  let i = 0;
  tableData.value.forEach((item) => {
    tableHeader.value.forEach((item1) => {
      if (item["value" + item1.position]) {
        i++;
      }
    });
  });
  return i;
};
const lineLossDataS = async (meter) => {
  tableHeader.value.forEach((item, index) => {
    // if (readRadio.value === "3") {
    if (item.position) {
      let obj = loopDataPos(
        organStructure.value[0].children,
        item.position,
        []
      );
      let tab1 = tableData.value[0];
      let tab2 = tableData.value[1];
      let tab3 = tableData.value[2];
      let tab4 = tableData.value[3];
      let tab5 = tableData.value[4];
      let tab55 = tableData.value[5];
      let tab6 = "";
      let tab7 = "";
      let tab8 = "";
      let tab9 = "";
      let tab10 = "";
      let tab11 = tableData.value[6];
      let tab12 = tableData.value[7];
      let tab13 = tableData.value[8];
      let tab14 = tableData.value[9];
      let tab15 = tableData.value[10];
      let tab155 = tableData.value[11];
      let tab16 = "";
      let tab17 = "";
      let tab18 = "";
      let tab19 = "";
      let tab20 = "";
      let tab21 = tableData.value[12];
      let meterItem = new ElectricMeter(
        obj[0].meterType,
        obj[0].name,
        obj[0].position,
        obj[0].meterModel,
        obj[0].wiringType,
        obj[0].voltage,
        obj[0].current,
        obj[0].meterAddr,
        obj[0].ptRatio,
        obj[0].ctRatio,
        obj[0].installAddr,
        tab1 ? tab1["value" + item.position] : "",
        tab2 ? tab2["value" + item.position] : "",
        tab3 ? tab3["value" + item.position] : "",
        tab4 ? tab4["value" + item.position] : "",
        tab5 ? tab5["value" + item.position] : "",
        tab55 ? tab55["value" + item.position] : "",
        tab6 ? tab6["value" + item.position] : "",
        tab7 ? tab7["value" + item.position] : "",
        tab8 ? tab8["value" + item.position] : "",
        tab9 ? tab9["value" + item.position] : "",
        tab10 ? tab10["value" + item.position] : "",
        tab11 ? tab11["value" + item.position] : "",
        tab12 ? tab12["value" + item.position] : "",
        tab13 ? tab13["value" + item.position] : "",
        tab14 ? tab14["value" + item.position] : "",
        tab15 ? tab15["value" + item.position] : "",
        tab155 ? tab155["value" + item.position] : "",
        tab16 ? tab16["value" + item.position] : "",
        tab17 ? tab17["value" + item.position] : "",
        tab18 ? tab18["value" + item.position] : "",
        tab19 ? tab19["value" + item.position] : "",
        tab20 ? tab20["value" + item.position] : "",
        "", //变比
        tab21 ? tab21["value" + item.position] : "",
        "", //用户表电源额定功率与当前功率的比值
        currentPlanId.value,
        tableVoltage.value,
        meterCurrent.value
      );
      meter.push(meterItem);
    }
  });
  // actualLineLossParm.value = "∞";
  //   theoreticalLossParm.value = "∞";
  console.log(
    "线损参数",
    meter,
    powerEle.value,
    tableVoltage.value,
    meterCurrent.value
  );
  let result = new LineLose(meter, powerEle.value);
  actualLineLossParm.value = await result.calculate();
};
//理论线损率
const theoreticalLoss = () => {};
const loopDataPos = (dataTab = [], pos, tempArr) => {
  dataTab.forEach((item) => {
    if (Number(pos) === item.position) {
      tempArr.push(item);
    }
    if (item.children != undefined && item.children.length > 0) {
      loopDataPos(item.children, pos, tempArr);
    }
  });
  return tempArr;
};
const cancelData = () => {
  flag.value = true;
  isContinue.value = true;
};
</script>

<style lang="scss" scoped>
//功率源
.line-Loss {
  .ll-control {
    margin-top: 5px;
    border: 1px solid #ebeef5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .ll-control-item {
      display: flex;
      .ll-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .item2,
      .item3 {
        p {
          display: flex;
          padding: 5px 0px;
          .el-input {
            width: 100px;
          }
        }
      }
      .el-button {
        width: 100px;
      }
      .item2 {
        .el-button {
          width: 50px;
        }
      }
    }
    .ll-item2 {
      width: 700px;
      justify-content: left;
      align-items: center;
    }
    .item2 {
      margin-right: 20px;
    }
    .item1 {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
    }
  }
}
</style>
<style>
.el-table__body tr.current-row > td.el-table__cell {
  background-color: #e6f2f0 !important;
}
.first-column-class {
  background-color: #e6f2f0 !important;
}
</style>
